<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<title>CSSS: A brief introduction</title>
	
	<link href="slideshow.css" rel="stylesheet" />
	<link href="theme.css" rel="stylesheet" />
	<link href="talk.css" rel="stylesheet" />

<header id="intro" class="slide">
        <h1>就労コンテスト2011</h1>
	<!--	<h1>
		<object data="logo.svg" width="100%" type="image/svg+xml">
			<img src="logo.png" alt="CSSS: CSS" />
		</object>
	</h1>
-->

<!--	<p class="attribution">By Lea Verou</p> -->
</header>

<section>
	<header class="slide">
		<h1>コラボで築く3.0</h1>
	</header>
	
	<section class="slide" title="2xシリーズのCSR">
		<h2>2xシリーズのCSR</h2>
		<p>　</p>
		<p>業務フローを意識した機能の増加</p>
		<p>　</p>
		<ul>
			<li class="delayed">「目的のはっきりした」画面志向</li>
			<li class="delayed">「特定業務に特化した」機能の充実</li>
		</ul>
	　	<p></p>
		<h3 class="delayed">  機能目的が明確化し使いやすくなった</h3>

	</section>

	<header class="slide">
		<h1>超えるべき「壁」</h1>
	</header>

	<section class="slide" title="勤怠管理って何％？">
		<h2>勤怠管理業務は、全体の中の何％？</h2>
		<p>　</p>
		<p>毎日勤怠を入力させているとして、、、</p>
		<ul>
			<li class="delayed">５分くらい（＝1.04％）</li>
		</ul>
		<p></p>
		<p class="delayed">その度いつもCOMPANY開くのって、、、</p>
		<ul>
			<li class="delayed">めんどくさい</li>
		</ul>

	</section>

	<header class="slide">
		<h2>「壁」</h2>
		<p>お客様の業務全体を通して、使いやすいわけではない</p>
		<p>　</p>
		<p>　</p>
		<style scoped>
			h2 {
				font-size: 200%;
				font-weight: bold;
				font-color: #0000ff;
			}
		</style>
		<h2 class="delayed"><code>3.0で提供するメリット</code></h2>
		<p>　</p>
		<h2 class="delayed"><code>お客様の他業務も含めた中で<br>利用しやすい機能</code></h2>
	</header>
	
	<section class="slide" title="実現策">
		<h2><code>実現策として考えたこと</code></h2>
		<ul>
			<li class="delayed">お客様は通常業務を「どのように」しているのか</li>
			<li class="delayed">なんらかの業務ツールは利用しているはず。</li>
			<li class="delayed">Word, Excel, グループウェア, Google系サービス, 自社のポータル etc&hellip;</li>
			<li class="delayed">メインで利用するツールから、必要なものを適宜利用できるようにすればいい！</li>
		</ul>
		<p2>　</p2>
		<style scoped>
			h2 {
				font-size: 125%;
				font-weight: bold;
			}
		</style>
		<h2 class="delayed"><code>お客様のメインの業務ツールと「コラボ」</code></h2>
		<ul>
			<li class="delayed">今回は、<a href="http://www.google.co.jp/ig?hl=ja">iGoogle</a>
                                            とコラボしてみました。</li>
		<ul>
	</section>
	
	<section class="slide" title="もっと考えなければならない点">
		<h2>さらに考えるべき点</h2>
		<h2 class="delayed">ブルーカラー</h2>
		<ul>
			<li class="delayed">そもそも従業員が端末持ってない</li>
			<li class="delayed">承認者たる上長も端末操作時間は短そう</li>
			<li class="delayed">生産管理業務などで忙しい</li>
		</ul>
	</section>

	<section class="slide" title="解決策">
		<h2>解決策</h2>
		<ul>
			<li class="delayed">メインのツールと連動で、ある程度は楽になる</li>
			<li class="delayed">加えて、承認者の負担を減らすべし</li>
			<ul>
				<li class="delayed">→入力インターフェースである打刻機に期待</li>
				<li class="delayed">（例）退勤時に出勤打刻忘れをお知らせしてくれる</li>
				<li class="delayed">（例）打刻機から休暇を取得、残日数チェックできる</li>
				<li>　</li>
			</ul>
		<li class="delayed"><code>打刻機が出勤忘れなどを判断できるよう、APIを提供</code></li>
		</ul>
	</section>

	<header class="slide">
		<h1>おしまい</h1>
	</header>

	<section class="slide" id="navigation">
		<h2>Navigation</h2>
		<p>Only through keyboard for now :(</p>
		<ul>
			<li>→ or ↓ to advance to the next slide or incrementally displayed item</li>
			<li>← or ↑ to go to the previous slide or incrementally displayed item</li>
			<li>Ctrl* + → or Ctrl* + ↓ to jump to the next slide</li>
			<li>Ctrl* + ← or Ctrl* + ↑ to jump to the previous slide</li>
			<li>Home to go to the first slide, End to go to the last</li>
			<li>Ctrl* + G to jump to an arbitrary slide (by slide number or identifier)</li>
		</ul>
		<p>* Ctrl or Shift actually. Only Shift works in Opera.</p>
	</section>
</section>

<section>
	<header class="slide">
		<h1>Features</h1>
	</header>
	
	<section class="slide">
		<h2>Thumbnail view</h2>
		<p>Press Ctrl+H (or Shift+H if you're in Opera) now.</p>
		<p class="delayed">Cool, huh? You can press Ctrl+Shift+H to see all slides (warning: can be slow!)</p>
	</section>
	
	<section class="slide">
		<h2>Timer</h2>
		<ul>
			<li>Timer in the form of a progress bar on the top</li>
			<li>Define the talk duration with the attribute <code>data-duration</code> on the <code>body</code></li>
			<li>Style the timer and the end state with the selectors <code>#timer</code> and <code>#timer.end</code> respectively.</li>
		</ul>
	</section>
	
	<section class="slide">
		<h2>Presenter view</h2>
		<p>This slide has presenter notes. They are only visible in presenter view (Ctrl+P or Shift+P).</p>
		<p class="presenter-notes">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</section>
	
	<section class="slide">
		<style scoped>
			h2 {
				font-size: 200%;
				font-weight: bold;
			}
		</style>
		<h2><code>&lt;style scoped /&gt;</code></h2>
		<p>You can use the HTML5 <code>scoped</code> attribute on style elements in slides, to only style the current slide or inside sections that include multiple slides to style all of them and nothing else.</p>
		<p>For example, inspect this slide and then run <code>$$('style[scoped]')[0].sheet.cssRules[0].selectorText</code> in the console to see how the original selector gets changed.</p>
	</section>
	
	<section class="slide">
		<h2>More features</h2>
		<ul>
			<li class="delayed">IDs are dynamically assigned by JavaScript&hellip;</li>
			<li class="delayed">&hellip;but you can also assign your own, bringing the best of both worlds</li>
			<li class="delayed">Incremental display of slide contents (just add <code>class="delayed"</code>)</li>
			<li class="delayed">Slide scaling based on window size (size everything you want to be scalable in ems)</li>
			<li class="delayed">Document.title changing according to slide title (fetched either from the <code>title</code> attribute or the slide's heading)</li>
		</ul>
	</section>
	
	<section class="slide">
		<h2>Drawbacks</h2>
		<ul>
			<li>Only supports modern browsers. Why?
				<ul>
					<li>More lightweight</li>
					<li>Easier to understand code</li>	
					<li>It's a presentation, so the environment is controlled anyway</li>
				</ul>
			</li>
			<li>No mouse click to advance to the next slide. I consider it annoying.</li>
			<li>Doesn't work in mobile :(</li>
		</ul>
	</section>
</section>

<section>
	<header class="slide">
		<h1>Plugins</h1>
	</header>
	
	<section class="slide">
		<h2>Plugin: CSS Snippets</h2>
		<pre>new CSSSnippet(document.getElementById('snippet'));</pre>
		<ul>
			<li>Dynamically edit CSS and reflect the results in any element's style
				<ul>
					<li>Which one? Specify a selector with the <code>data-subject</code> attribute or leave blank for the slide to be the subject</li>
				</ul>
			<li>Automatically prefixes CSS3 properties/values, when needed
				<ul>
					<li>Also does it with the style attribute (statically) if the element is not a text field (doesn't work in IE and Firefox 3.6)</li>
				</ul>
			</li>
			<li>Textarea automatically adjusts rows/font-size on line break (use class <code>dont-adjust</code> to turn off)</li>
		</ul>
	</section>
	
	<section class="slide">
		<h2>CSS Snippets demo</h2>
		<p>Edit the following CSS code:</p>
		<textarea class="snippet">background-color:red;
background-image: linear-gradient(red, #600)</textarea>
	</section>
	
	<section class="slide" id="animation-demo">
		<h2>CSS Snippets: raw CSS</h2>
		<textarea class="snippet" data-raw>@keyframes rainbow {
	from, to { background: red }
	16% { background: yellow }
	33% { background: green }
	50% { background: aqua }
	66% { background: blue }
	83% { background: fuchsia }
}

#animation-demo { animation: 30s rainbow infinite; }</textarea>
	</section>
	
	<section class="slide">
		<h2>Plugin: CSS Controls</h2>
		<ul>
			<li>Use sliders and other controls to adjust CSS values
				<ul>
					<li>Which one? Specify a selector with the <code>data-subject</code> attribute or leave blank for the slide to be the subject</li>
					<li>Specify style with <code>data-style</code> (use <code>{value}</code> where the result will be)</li>
				</ul>
			<li>Automatically prefixes CSS3 properties/values, when needed</li>
		</ul>
	</section>
	
	<section class="slide" id="css-controls-demo">
		<h2>CSS Controls demo</h2>
		<label>Slide lightness: 
			<input type="range" min="0" max="255" value="128" data-style="background-color:rgb({value}, {value}, {value});" class="css-control" />
		</label>
		<label>
			border-width:
			<input type="number" min="0" max="60" value="30" data-style="border-width: {value}px;" class="css-control" size="5" />
		</label>
		<label>
			font-family:
			<select data-style="font-family: {value};" class="css-control">
				<option selected>sans-serif</option>
				<option>Georgia, serif</option>
				<option>Consolas, monospace</option>
				<option>'Trebuchet MS', sans-serif</option>
			</select>
		</label>
	</section>
</section>
<footer class="slide" title="The End">
	<h2>Thank you!</h2>
	<p>Get it or contribute at <a href="http://github.com/LeaVerou/CSSS">http://github.com/LeaVerou/CSSS</a></p>
	<p>Credits:</p>
	<ul>
		<li><a href="http://lukeroberts.us/2008/12/wallpaper-colourful-wood/">Colored wood background by Luke Roberts</a></li>
		<li>The name CSSS is actually inspired by S5, as you could probably guess ;-)</li>
		<li>A big thanks to the community at Github for various contributions to this project</li>
	</ul>
</footer>

<script src="slideshow.js"></script>
<script src="plugins/css-prefix.js"></script>
<script src="plugins/css-edit.js"></script>
<script src="plugins/css-snippets.js"></script>
<script src="plugins/css-controls.js"></script>
<script>
var slideshow = new SlideShow();

var snippets = document.querySelectorAll('.snippet');
for(var i=0; i<snippets.length; i++) {
	new CSSSnippet(snippets[i]);
}

var cssControls = document.querySelectorAll('.css-control');
for(var i=0; i<cssControls.length; i++) {
	new CSSControl(cssControls[i]);
}
</script>
	
</body>
</html>